<template>
  <a-card title="商品列表">
    <div class="table-operations">
      <a-space>
        <a-input-search
          v-model:value="searchText"
          placeholder="搜索商品"
          @search="onSearch"
          style="width: 200px"
        />
        <a-button type="primary" @click="showAddModal">添加商品</a-button>
      </a-space>
    </div>

    <a-table
      :columns="columns"
      :data-source="data"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      rowKey="id"
    >
      <template #action="{ record }">
        <a-space>
          <a-button size="small" @click="editItem(record)">编辑</a-button>
          <a-button size="small" danger @click="deleteItem(record)"
            >删除</a-button
          >
        </a-space>
      </template>
    </a-table>
    <n-modal
      :bordered="false"
      v-model:visible="visible"
      title="添加商品"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form :model="formState" layout="vertical">
        <a-form-item label="商品名称" name="name">
          <a-input v-model:value="formState.name" />
        </a-form-item>
        <a-form-item label="价格" name="price">
          <a-input-number
            v-model:value="formState.price"
            :min="0"
            :precision="2"
          />
        </a-form-item>
        <a-form-item label="库存" name="stock">
          <a-input-number v-model:value="formState.stock" :min="0" />
        </a-form-item>
      </a-form>
    </n-modal>
  </a-card>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import NModal from "../../components/NModal.vue";
import { message } from "ant-design-vue";

const columns = [
  {
    title: "ID",
    dataIndex: "id",
    key: "id",
  },
  {
    title: "商品名称",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "价格",
    dataIndex: "price",
    key: "price",
  },
  {
    title: "库存",
    dataIndex: "stock",
    key: "stock",
  },
  {
    title: "操作",
    key: "action",
    slots: { customRender: "action" },
  },
];

const data = ref([]);
const loading = ref(false);
const searchText = ref("");
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
});

const fetchData = async () => {
  loading.value = true;
  try {
    // 这里替换为实际的API调用
    // const res = await getProductList({
    //   page: pagination.current,
    //   pageSize: pagination.pageSize,
    //   keyword: searchText.value
    // });
    // data.value = res.data.list;
    // pagination.total = res.data.total;

    // 模拟数据
    data.value = Array.from({ length: 10 }, (_, i) => ({
      id: i + 1,
      name: `商品${i + 1}`,
      price: (Math.random() * 100).toFixed(2),
      stock: Math.floor(Math.random() * 100),
    }));
    pagination.total = 50;
  } catch (error) {
    message.error("获取商品列表失败");
  } finally {
    loading.value = false;
  }
};

const onSearch = () => {
  pagination.current = 1;
  fetchData();
};

const handleTableChange = (pag) => {
  pagination.current = pag.current;
  pagination.pageSize = pag.pageSize;
  fetchData();
};

const visible = ref(false);
const formState = reactive({
  name: "",
  price: 0,
  stock: 0,
});

const showAddModal = () => {
  visible.value = true;
};

const handleOk = () => {
  // 这里替换为实际的API调用
  // await addProduct(formState);
  message.success("添加商品成功");
  visible.value = false;
  fetchData();
};

const handleCancel = () => {
  visible.value = false;
};

const editItem = (record) => {
  // 编辑商品逻辑
};

const deleteItem = (record) => {
  // 删除商品逻辑
};

onMounted(() => {
  fetchData();
});
</script>

<style scoped>
.table-operations {
  margin-bottom: 16px;
}
</style>
